import React, { Component } from 'react';
import './left-menu.scss';

/*
左侧菜单组件
catList arr 分类的数据
getCatID fn
*/
class LeftMenu extends Component {
  constructor (...args) {
    super(...args);
    this.state = {
      currentL1ID: 'all',
      currentL2ID: null,
      currentPickID: 'all'
    }
  }
  fnClick (ID, level) {
    console.log(ID, level);
    switch (level) {
      case 1:
        this.setState({
          currentL1ID: ID,
          currentPickID: ID
        });
        break;
      case 2:
        this.setState({
          currentL2ID: ID,
          currentPickID: ID
        })
        break;
    }
    this.props.getCatID(ID);
  }
  render() {
    return (
      <div className="left-menu">
        <div className="cat-L1">
          <div
            className={this.state.currentPickID === 'all' ? 'L1-name L1-active' : 'L1-name'}
            onClick={this.fnClick.bind(this, 'all', 1)}
          >全部</div>
        </div>
        {this.props.catList.length > 0 ? (
          this.props.catList.map(cat => (
            <div className="cat-L1" key={cat.id}>
              <div
                className={this.state.currentPickID === cat.id ? 'L1-name L1-active' : 'L1-name'}
                onClick={this.fnClick.bind(this, cat.id, cat.level)}
              >{cat.name}</div>
              {/* 二级目录 */}
              {
                cat.children.length > 0 && this.state.currentL1ID === cat.id ? (
                  cat.children.map(L2 => (
                    <div className="cat-L2" key={L2.id}>
                      <div
                        className={this.state.currentPickID === L2.id ? 'L2-name L2-active' : 'L2-name'}
                        onClick={this.fnClick.bind(this, L2.id, L2.level)}
                      >{L2.name}</div>
                    </div>
                  ))
                ) : ''
              }
            </div>
          ))
        ) : ''}
      </div>
    );
  }

}

export default LeftMenu;
